<template >
    <div>
        <!-- 面包屑  -->
        <div class="mbx">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="tab-box">
            <!-- 警告  -->
            <div class="jg">
                <el-alert title="警告提示的文案" type="warning" show-icon>
                </el-alert>
            </div>
            <!--  -->
            <p>选择商品分类：
                <!-- 级联选择器 -->
                <el-cascader :props="propslist" v-model="cat_id" :options="options" @change="handleChange"></el-cascader>
            </p>
            <!-- tab切换 -->
            <el-tabs v-model="activeName">
                <el-tab-pane label="动态参数" name="many">
               <attrstable :tables="tableData" :cat_id="cat_id" @fun="handleChange" :activeName="activeName" ></attrstable>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="only">
                    <attrstable :tables="onlylist" :cat_id="cat_id" @fun="handleChange" :activeName="activeName" ></attrstable>
         
              </el-tab-pane>

            </el-tabs>


        </div>

   


    </div>
</template>
<script>
import attrstable from "../components/attrstable.vue"
import { getclassify, attrib,attribo } from "../api/api"
export default {
components:{attrstable},
    data() {
        return {
            // 级联选择器 
            cat_id: [],
            options: [],
            propslist: {
                label: "cat_name",
                value: "cat_id",
                children: "children"
            },
            //tab切换
            activeName: "many",
            //表格
            tableData: [],
            //静态数剧
            onlylist:[],
    

        }
    },
    methods: {

        //    级联选择器 
        handleChange() {
            attrib({ id: this.cat_id[2] }).then(res => {
                // console.log(res);
                res.data.forEach(item => {
                    item.attr_vals = item.attr_vals ? item.attr_vals.trim().split(" ") : []
                    //控制tag文本框的显示隐藏
                    item.inputVisible = false
                    //控制tag文本框输入的值
                    item.inputValue = ''
                })
                this.tableData = res.data

            })
            attribo({ id: this.cat_id[2] }).then(res => {
                // console.log(res);
                res.data.forEach(item => {
                    item.attr_vals = item.attr_vals ? item.attr_vals.trim().split(" ") : []
                    //控制tag文本框的显示隐藏
                    item.inputVisible = false
                    //控制tag文本框输入的值
                    item.inputValue = ''
                })
                this.onlylist = res.data

            })

        },
        //数据请求
        getclassify() {
            getclassify().then(res => {
                // console.log(res);
                this.options = res.data

            })
        },

     
   },
    created() {
        this.getclassify()
    },
}
</script>
<style lang="scss" scoped>
.tab-box {
    margin-top: 15px;
    background-color: #fff;
    padding: 18px;
    box-sizing: border-box;
}

.jg {
    margin: 15px 0;
}

.tab {
    margin-top: 10px;
}

.addcs {
    margin-bottom: 10px;
}

.el-tag {
    margin-left: 10px;
}

.input-new-tag {
    width: 120px;
}
</style>